<template>
    <Dialog :app-dialog="appDialog" @close="cancelHandel">
        <el-table
            ref="tableRef"
            :data="tableData"
            stripe
            height="480"
            style="width: 100%"
            header-row-class-name="table_header_title"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="content" label="欢迎语" min-width="220">
                <template #default="scope">
                    <div class="content_row">
                        <el-tooltip :content="scope.row.content" placement="right" effect="light">
                            <span class="content_text">{{ scope.row.content }}</span>
                            <template #content>
                                <el-scrollbar wrap-class="content_text_all">
                                    <p>{{ scope.row.content }}</p>
                                </el-scrollbar>
                            </template>
                        </el-tooltip>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="welcome_friend_attachment" min-width="200" label="附件">
                <template #default="scope">
                    <template v-for="v in scope.row.welcome_friend_attachment" :key="v.id">
                        <!-- // 图片 -->
                        <el-tooltip v-if="v.type === 1" :content="v.media_file?.name" placement="top" effect="light">
                            <el-image
                                class="wel_content_file_item"
                                :src="v.media_file?.absolute_url"
                                style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px">
                                <template #error>
                                    <el-image src="/static/file/pic.png" alt=""></el-image>
                                </template>
                            </el-image>
                        </el-tooltip>
                        <!-- 视频 -->
                        <el-tooltip v-if="v.type === 2" :content="v.media_file?.name" placement="top" effect="light">
                            <el-image
                                v-if="v.media_file?.absolute_url"
                                class="wel_content_file_item"
                                :src="`${v.media_file?.absolute_url}?x-oss-process=video/snapshot,t_0,f_jpg,w_320,h_240,m_fast`"
                                style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px"></el-image>
                            <el-image
                                v-else
                                style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px"
                                src="/static/file/mov.png"
                                alt=""></el-image>
                        </el-tooltip>
                        <!-- 链接 -->
                        <el-tooltip
                            v-if="v.type === 3"
                            :content="v.link_title || '暂无标题'"
                            placement="top"
                            effect="light">
                            <img
                                class="wel_content_file_item"
                                src="/static/file/link.png"
                                style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" />
                        </el-tooltip>
                        <!-- 音频 -->
                        <el-tooltip
                            v-if="v.type === 4"
                            :content="v.media_file?.name + ' ' + (v.media_file?.size / 1024 / 1024).toFixed(2) + 'M'"
                            placement="top"
                            effect="light">
                            <img
                                class="wel_content_file_item"
                                src="/static/file/mp3.png"
                                style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" />
                        </el-tooltip>
                        <!-- 文件 -->
                        <el-tooltip
                            v-if="v.type === 5"
                            :content="v.media_file?.name + ' ' + (v.media_file?.size / 1024 / 1024).toFixed(2) + 'M'"
                            placement="top"
                            effect="light">
                            <img
                                class="wel_content_file_item"
                                :src="getSuffixIcon(v.media_file?.name)"
                                style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" />
                        </el-tooltip>
                        <!-- 抽奖 -->
                        <el-tooltip v-if="v.type === 8" :content="v.link_title" placement="top" effect="light">
                            <el-image
                                class="wel_content_file_item"
                                :src="v.link_share_image"
                                style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px">
                                <template #error>
                                    <el-image src="/static/file/form.png" alt=""></el-image>
                                </template>
                            </el-image>
                        </el-tooltip>
                        <!-- 收集表 -->
                        <el-tooltip v-if="v.type === 9" :content="v.collect_form?.title" placement="top" effect="light">
                            <el-image
                                v-if="v.collect_form?.cover_image"
                                class="wel_content_file_item"
                                :src="v.collect_form?.cover_image"
                                style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px"></el-image>
                            <el-image
                                v-else
                                class="wel_content_file_item"
                                style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px"
                                src="/static/file/form.png"
                                alt=""></el-image>
                        </el-tooltip>
                        <!-- 产品 -->
                        <el-tooltip
                            v-if="v.type === 7"
                            :content="v.retail_product?.product_name"
                            placement="top"
                            effect="light">
                            <img
                                class="wel_content_file_item"
                                :src="v.retail_product?.cover || '/static/file/mp3.png'"
                                style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" />
                        </el-tooltip>
                        <!-- 公众号 -->
                        <el-tooltip
                            v-if="v.type === 10"
                            :content="v.official_article?.content"
                            placement="top"
                            effect="light">
                            <el-image
                                v-if="v.official_article?.cover"
                                class="wel_content_file_item"
                                :src="v.official_article?.cover"
                                style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px"></el-image>
                            <el-image
                                v-else
                                style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px"
                                src="/static/file/official.png"
                                alt=""></el-image>
                        </el-tooltip>
                        <!-- 小程序 -->
                        <el-tooltip v-if="v.type === 11" :content="v.miniprogram?.title" placement="top" effect="light">
                            <img
                                class="wel_content_file_item"
                                :src="v.miniprogram?.image_url"
                                style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" />
                        </el-tooltip>
                    </template>
                </template>
            </el-table-column>
            <el-table-column prop="send_times" label="消息数量" width="125"> </el-table-column>
            <!-- 部门、员工 -->
            <el-table-column prop="depart" label="生效部门、员工" min-width="150">
                <template #default="scope">
                    <div class="depart_main">
                        {{ scope.row.department > 0 ? getSetionId('name', scope.row.department).join('、') : ' ' }}
                        {{ scope.row.work_user.length > 0 ? getSetionId('name', scope.row.work_user).join('、') : '' }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="user_name" label="创建人" min-width="150"></el-table-column>
            <el-table-column prop="user_local_department" label="所在部门" min-width="150">
                <template #default="scope">
                    <span>{{
                        scope.row.user_local_department && scope.row.user_local_department?.length > 0
                            ? getSetionId('name', scope.row.user_local_department).join('、')
                            : '--'
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="created_at" label="创建时间" min-width="200"></el-table-column>
            <el-table-column prop="updated_at" label="修改时间" min-width="200"></el-table-column>
            <template #empty>
                <el-empty class="emty_box" :image-size="150" description=" ">
                    <template #image>
                        <img src="/static/noBind.png" alt="" />
                        <el-button
                            type="primary"
                            size="small"
                            @click="router.push('/channel/qwbasicoperation/welcomefriend/addWelcomFriend')">
                            创建欢迎语
                        </el-button>
                        <div>您还没有创建欢迎语</div>
                    </template>
                </el-empty>
            </template>
        </el-table>
        <ZWPagination ref="PaginationRef" @submit="getChannelFriendList" />
    </Dialog>
</template>

<script setup lang="ts">
import { reactive, ref, computed, watch, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useStore } from '@/store';
import { channelFriendList } from '@/api/channel/qwbase';
import { getSetionId, getSuffixIcon } from '@/utils/utils';

import Dialog from '@/components/Dialog.vue';
import ZWPagination from '@/components/ZWPagination.vue';

const router = useRouter();
const store = useStore();

const tableRef = ref();
const tableData = ref([]); //已有欢迎语数据
const seleItem = ref(); // 选中的欢迎语数据

interface Props {
    modelValue: boolean;
}

const props = withDefaults(defineProps<Props>(), {
    modelValue: false
});

const emit = defineEmits(['update:modelValue', 'select']);

const handleSelectionChange = (selection: any) => {
    if (selection.length > 1) {
        tableRef.value.clearSelection();
        tableRef.value.toggleRowSelection(selection[selection.length - 1]);
    }
    seleItem.value = selection[selection.length - 1];
};

const getChannelFriendList = (data?: any) => {
    channelFriendList({
        page: 1,
        limit: data?.page_size || 15,
        ...data
    }).then((res: any) => {
        tableData.value = res.data;
        store.dispatch('pageTotal', res.total);
    });
};

const cancelHandel = () => {
    emit('update:modelValue', false);
    tableData.value.splice(0);
};

const submitHandel = () => {
    emit('select', seleItem.value);
    cancelHandel();
};

const appDialog = reactive({
    visible: false,
    title: '选择已有欢迎语',
    width: '1000px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '保存',
    isInit: false,
    isChooseDisabled: false,
    chooseArr: []
});

defineExpose({
    appDialog
});

watch(
    () => props.modelValue,
    val => {
        val && getChannelFriendList();
        appDialog.visible = val;
    }
);
</script>

<style lang="scss" scoped>
:deep(.content_row) {
    display: flex;
    min-width: 220px;
    .content_text {
        overflow: hidden;
        text-overflow: ellipsis;
        width: auto;
        max-width: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        word-break: break-all;
    }
}
:deep(.content_text_all) {
    max-width: 300px;
    max-height: 200px;
}
:deep(.wel_content_file_item) {
    width: 40px;
    height: 40px;
    overflow: hidden;
}
</style>
